<template>
  <Echart class="leftCenter-content" :options="options" v-if="pageFlag"/>
  <reacquire v-else @click="getData"></reacquire>
</template>

<script>
import reacquire from '../../components/reacquire/reacquire.vue';
import {currentGET} from '../../api/modules'
export default {
  components: { reacquire },
  data() {
    return {
      pageFlag:false,
      timer:null,
      options:{}
    };
  },
  filters: {
    
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
  },
  methods: {
    initChart(data){
      this.options={
        grid:{
          show:true,
          borderColor:'#6b7b94',
          top:35,
          bottom:30,
          left:45,
          right:40
        },
        tooltip:{
          trigger:'axis',
          show:true,
          backgroundColor:'#00000088',
          borderColor:'#0072FF',
          textStyle:{
            color:'#fff'
          },
        },
        xAxis:{
          type:'category',
          data:data.dateList,
          boundaryGap:0,
          axisTick:{
            show:false
          },
          axisLabel:{
            color:'#6b7b94'
          },
          splitLine:{
            show:true,
            lineStyle:{
              color:'#6b7b9444'
            }
          }
        },
        yAxis:{
          axisLabel:{
            formatter:'{value}万',
            color:'#6b7b94'
          },
          splitLine:{
            lineStyle:{
              color:'#6b7b9444'
            }
          }
        },
        series:[
          {
            name:'总销售额（万）',
            type:'line',
            data:data.numList,
            smooth:true,
            itemStyle:{
              color:'#f59309'
            },
            symbolSize:0,
            areaStyle:{
              color:{
                type:'linear',
                x:0,
                y:0,
                x2:0,
                y2:1,
                colorStops:[
                  {
                    offset:0,color:'#f59309'
                  },
                  {
                    offset:1,color:'#000'
                  }
                ],
                global:false
              }
            },
            markPoint:{
              data:[
                {
                  type:'max',
                  symbol:'rect',
                  symbolOffset:[0,-20],
                  itemStyle:{
                    color:'#00000000'
                  },
                  label:{
                    color:'#f59309',
                    borderColor:'#f59309',
                    borderWidth:1,
                    padding:[7,7],
                    borderRadius:5,
                    formatter:'{c}万',
                    backgroundColor:'#f5930944'
                  }
                },
                {
                  type:'max',
                  symbol:'circle',
                  symbolSize:8,
                  itemStyle:{
                    color:'#f59309',
                  },
                  label:{
                    formatter:''
                  }
                }
              ]
            }
          },
          {
            name:'合同额（万）',
            type:'line',
            data:data.numList2,
            smooth:true,
            itemStyle:{
              color:'#00EAFF '
            },
            symbolSize:0,
            areaStyle:{
              color:{
                type:'linear',
                x:0,
                y:0,
                x2:0,
                y2:1,
                colorStops:[
                  {
                    offset:0,color:'#00EAFF'
                  },
                  {
                    offset:1,color:'#000'
                  }
                ],
                global:false
              }
            },
            markPoint:{
              data:[
                {
                  type:'max',
                  symbol:'rect',
                  symbolOffset:[0,-20],
                  itemStyle:{
                    color:'#00EAFF00'
                  },
                  label:{
                    color:'#00EAFF',
                    borderColor:'#00EAFF',
                    borderWidth:1,
                    padding:[7,7],
                    borderRadius:5,
                    formatter:'{c}万',
                    backgroundColor:'#00EAFF44'
                  }
                },
                {
                  type:'max',
                  symbol:'circle',
                  symbolSize:8,
                  itemStyle:{
                    color:'#00EAFF',
                  },
                  label:{
                    formatter:''
                  }
                }
              ]
            }
          },
        ]
      }
    },
    getData(){
      currentGET('big10').then(res=>{
        if (res.success) {
          this.initChart(res.data)
          this.pageFlag = true
          this.switper()
        }else{
          this.pageFlag = false
        }
      })
    },
    switper(){
      if (this.timer) {
        return
      }
      this.timer= setInterval(()=>{
        this.getData()
      },this.$store.state.setting.echartsAutoTime)
    }
  },
};
</script>
<style lang='scss' scoped>
</style>